<template>
  <div class="top">
    <tabswitch :list="tabs" @change="changeTab" :defaultValue="'销货'" />
    <div class="wrapper">
      <div class="left" v-if="showHist">
        <tiny-chart-histogram :data="chartData" height="310px" :settings="chartSettings" />
      </div>
      <div class="right">
        <div style="text-align: left">单品销售金额排行(20)
          <span   @click="phSort('asc')" :class="['phsort',phsort==='asc'?'active':'']" style="padding-left: 10px;font-size: 16px;font-weight: bold;">⬆</span>
          <span   @click="phSort('desc')" :class="['phsort',phsort==='desc'?'active':'']" style="padding-left: 10px;font-size: 16px;font-weight: bold;">⬇</span>
        </div>
        <div class="mt20" style="height: 240px; overflow: auto">
          <div class="good" v-for="(item, index) in ph" :key="index">
            <div style="width: 20px">{{index+1}}</div>
            <div style="flex: 1">{{item.invName}}</div>
            <div style="width: 120px; text-align: right;font-weight: bold;color: #333333;">￥{{item.total}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {ref, onBeforeMount} from "vue";
import tabswitch from '@/views/home/tabswitch.vue';
import tool from "@/utils/tool";
const showHist = ref(false)
const tabs = ref([
  {text: '销货金额图表'},
])
const chartData = ref({
  columns: ['日期','销售','退货'],
  rows: []
})
const chartSettings = ref({
  showLine: ['销售','退货']
})
const model = ref({
  billType: '销货',
  range: '近一周'
})
const ph = ref([])
const phsort = ref('')

onBeforeMount(() => {
  changeTab(model.value)
  setTimeout(()=>{
    showHist.value = true
  }, 100)
})
const phSort = (direct) => {
  phsort.value = direct
  changeTab(model.value)
}
const changeTab = (val) => {
  chartData.value.rows = []
  model.value = val
  tool.post('home/middle', {...model.value,phsort: phsort.value}, true).then(ret => {
    if(ret.stat) {
      chartData.value.rows = ret.data.chart
      ph.value = ret.data.ph
    }
  })
}
</script>

<style scoped lang="scss">
.phsort {
  &:hover{
    cursor: pointer;
    color: #1e9fff;
  }
  &.active {
    color: red;
  }
}
.wrapper {
  height: 300px;
  display: flex;
  .left {
    flex: 1;
    padding-right: 30px;
    padding-bottom: 20px;
  }
  .right {
    width: 400px;
    padding-top: 20px;
    .good {
      display: flex;
      margin-bottom: 2px;
      height: 30px;
      line-height: 30px;
      padding: 0 3px;
      &:hover {
        background-color: rgba(0, 0, 0, 0.1);
      }
    }
  }
}
</style>